<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="/js/jquery.js"></script>
        <script type="text/javascript" src="/js/md5.js"></script>
        <title>Register: Personal info</title>
        <style>
            @import url(/css/LoginStyle.css);
            body{text-align: center;}
            .text{
                margin-top:20px;
                padding-left:20px;
                font-family: QS-R;
            }

            .btn{
                margin-top:20px;
            }

            .button:hover{
                cursor: pointer;
            }
            .forget {
                margin-top:10px;
            }
            .forget span:hover {
                cursor: pointer;
                color:#76839b;
            }
            .sign-up {
                margin-top:10px;
            }

            .sign-up .clickable:hover {
                cursor: pointer;
                color:#76839b;
            }

            .forget span{
                text-align:left;
                padding-right:220px;
            }

            .sign-up .clickable{
                text-align:left;
                padding-right:130px;
            }

            .font-QS-R {
                font-family: QS-R;
                /*color: #0066FF;*/
            }

            .text::-webkit-input-placeholder{
                padding-left:50px;
                font-family: QS-R;
            }
            .inner-window {
                width: 500px;
                margin: 0 auto;
                float: left;
            }

            .outer-window {
                width: 500px;
                margin: 0 auto;
                overflow:hidden;


            }
            .outer-window .container {
                position:relative;
            }

            .clearfix:after {

                content: "";
                display: block;
                font-size: 0;
                clear: both;
                visibility: hidden;

            }
            .select-role h1{
                text-align: center;
            }
            .select-role h2{
                font-family: QS-M;
                font-size:20px;
            }
            .button1{
                background-color: rgba(157,157,157,.15);
                font-size: 30px;
                border: none;
                border-radius: 8px;
                width: 225px;
                height: 70px;
                font-family: QS-M;
            }
        </style>
    </head>
    <body style="width:100%">
        <div class="outer-window">
            <div class="container clearfix" style="width:2000px">
                <div class="login inner-window">
                    <div align="center">
                        <img src="/image/LOGO.png" style="width:222px;height:114px;">
                    </div>
                    <h1>Log in</h1>

                    <div style="position: absolute;display: none" class="change-psw-bar">
                        <input type="password" id="username-" name="password" class="input text" placeholder="Set your password">
                        <input type="password" id="password-" name="password" class="input text" placeholder="Set your password">
                        <input onclick="cloeseBar()" type="button"  class="button next" Value="submit">
                    </div>

                    <div>
                        <input type="text" id="login-username" name="login-username" class="input text" placeholder="User Name"><br/>
                        <div id="err-msg" style="color: red;display: none"></div>
                        <input type="password" id="login-password" name="login-password" class="input text" placeholder="Password"><br/>
                    </div>
                    <div class="forget" onclick="document.location='/update/psw'">
                        <span class="font-QS-R" style="color:#004add;">Forget your password?</span>
                    </div>
                    <div class="btn" style="margin-left:150px">

                        <input style="    margin-right: -130px;" type="button" id="login" class="button" Value="Login">
                    </div>
                    <div class="sign-up">
                        <span class="font-QS-R next">Still do not have account yet? </span><span style="color:#004add;"  class="clickable font-QS-R next">Sign up</span>
                    </div>
                </div>
                <div class="select-school inner-window">
                    <div align="center">
                        <img src="/image/LOGO.png" style="width:222px;height:114px;">
                    </div>
                    <h1>Create account</h1>
                    <input id="uniName" name="uniName" type="text" class="input-uni text" style=" background-image: url(/image/Uni.png); padding-left: 70px;" placeholder="Choose your university"><br/>
                    <div class="btn" style="margin-left:150px">
                        <input type="button" class="button back" Value="Back">
                        <input type="button" id="select-uni-next" class="button next" Value="Next">
                    </div>
                </div>
                <div class="select-role inner-window">
                    <div align="center">
                        <img src="image/LOGO.png" style="width:222px;height:114px;">
                    </div>
                    <h1>Create account</h1>
                    <div align="center">
                        <div align="left" style="width:500px">
                            <h2>Please choose your position</h2>
                        </div>
                        <button id="1" class="button1" onclick=changeStyle(1);>Student</button>
                        <button id="2" class="button1"  style="margin-left:45px" onclick=changeStyle(2);>Staff</button>
                        <div class="btn" style="margin-left:242px">
                            <input type="button" class="button back" Value="Back">
                            <input type="button" class="button next" Value="Next">
                        </div>
                    </div>
                </div>
                <div class="set-info inner-window">
                    <div align="center">
                        <img src="image/LOGO.png" style="width:222px;height:114px;">
                    </div>
                    <h1>Create account</h1>
                    <div>
                        <input type="text" id="uniId" name="uniId" class="input text" placeholder="Enter your university ID"><br/>
                        <input type="text" id="username" name=username class="input text" placeholder="Set your username"><br/>
                        <input type="password" id="password" name="password" class="input text" placeholder="Set your password">
                    </div>
                    <div class="btn" style="margin-left:150px">
                        <input type="button" class="button back" Value="Back">
                        <input type="button" id="submit" class="button" Value="Submit">
                    </div>
                </div>
            </div>

        </div>

    </body>
    <script>
        var JumperController = (function () {
            let currentIndex = 0
            return {
                next:function(){
                    if (currentIndex===3){
                        return;
                    }
                    $(".container").animate({
                        left:(currentIndex+1)*-500
                    },"fast","swing",()=>{currentIndex=currentIndex+1})
                },
                back:function () {
                    if (currentIndex===0){
                        return;
                    }
                    $(".container").animate({
                        left:(currentIndex-1)*-500
                    },"fast","swing",()=>{currentIndex=currentIndex-1})
                }
            }
        })();
        $(".next").click(function () {
            JumperController.next()
        })
        $(".back").click(function () {
            JumperController.back()
        })


        function changeStyle(a) {
            var bta= document.getElementById(a);
            bta.style.background="rgba(157,157,157,.55)";
            bta.value="select";
            for(var b=1;b<=2;b++){
                if(b!=a){
                    var btb=document.getElementById(b);
                    btb.style.background="rgba(157,157,157,.15)";
                    btb.value="no-select";
                }
            }
        }

        $("#submit").click(function() {
            let role;
            if (document.getElementById("1").value==="select"){
                role="learner";
            }else if (document.getElementById("2").value==="select"){
                role="eductor"
            }
            let uniId = document.getElementById("uniId").value;
            let username = document.getElementById("username").value;
            let password = hex_md5(document.getElementById("password").value);
            alert("success to sign! please click the back to return login!");
            $.ajax({
                url:"/register",
                method:"POST",
                dataType:"JSON",
                data:{
                    uniId:uniId,
                    username:username,
                    passwords:password,
                    role:role,
                },

                success:function(data){

                    alert("success to sign! please click the back to return login!");

                }
            })
        })


        $("#select-uni-next").click(function() {
            $.ajax({
                url: "university/"+document.getElementById("uniName").value,
                method:"GET",
                dataType:"JSON",
                success: function(data){
                    if (data.code===true){
                        document.getElementById("uniId").value=data.data.uniId;
                    }else{
                        let errorMsg=data.errMsg;
                        document.getElementById("uniId").value = "Error:"+errorMsg;
                        document.getElementById("uniId").style.color="red";
                    }
                },
            })
        })
        $("#login").click(function () {
            $.ajax({
                url:"/login/doLogin",
                method:"GET",
                dataType:"JSON",
                data:{
                    username:document.getElementById("login-username").value,
                    passwords:hex_md5(document.getElementById("login-password").value)
                },
                success:function (data) {
                    if (data.code===true){
                        let location = data.location;
                        document.location=location;
                    }else {
                        let msgMsg = data.errMsg;
                        let errElement = document.getElementById("err-msg");
                        errElement.innerHTML = msgMsg;
                        errElement.style.display = "block";
                    }
                }
            })
        })
        $("#uniId").focus(function(event){
            if (event.currentTarget.value.search("Error")!==-1){
                document.getElementById("uniId").value = "";
                document.getElementById("uniId").style.color="black";
            }
        })
    </script>
</html>